<template>
  <div>
    <van-field
      size="small"
      clearable
      v-model="receiver"
      label="收货人姓名"
      maxlength="10"
      placeholder="请输入收货人姓名"
      @blur="receiverErrmsg = ''"
      :error-message="receiverErrmsg"
    />
    <van-field
      size="small"
      clearable
      v-model="phone"
      label="手机号码"
      type="number"
      maxlength="11"
      placeholder="请输入手机号码"
      @blur="phoneErrmsg = ''"
      :error-message="phoneErrmsg"
    />
    <van-field
      size="small"
      clearable
      :autosize="true"
      type="textarea"
      rows="4"
      v-model="address"
      label="收货地址"
      placeholder="请输入收货地址"
      @blur="addressErrmsg = ''"
      :error-message="addressErrmsg"
    />

    <div style="padding: 15px;">
      <van-button round type="primary" size="large" @click="onSaveClick"
        >保存地址</van-button
      >
      <div style="padding: 5px;" />
      <van-button
        v-if="this.$route.query.editType != 'addNewAddr'"
        round
        type="danger"
        size="large"
        @click="onDeleteClick"
        >删除地址</van-button
      >
    </div>
  </div>
</template>
<script>
import { Field, Toast, Button } from "vant"
import { axios, API_URL } from "../../api"
export default {
  components: {
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      receiver: "",
      receiverErrmsg: "",
      phone: "",
      phoneErrmsg: "",
      address: "",
      addressErrmsg: ""
    }
  },

  methods: {
    onDeleteClick() {
      axios
        .delete(API_URL + "address", {
          headers: {
            Authorization: this.$store.state.customer_token
          },
          params: {
            address_id: this.$route.query.address_id
          }
        })
        .then(() => {
          Toast("删除地址成功")
          this.$router.go(-1)
        })
        .catch(err => {
          if (err.response.status == 401) {
            this.$router.push({ name: "login" })
          }
          console.error(err)
        })
    },
    onSaveClick() {
      /* 信息输入逻辑与错误提示 */
      this.receiverErrmsg = this.receiver.length > 0 ? null : "请输入收货人姓名"
      this.phoneErrmsg = this.phone.length == 11 ? null : "输入电话号码格式错误"
      this.addressErrmsg = this.address.length > 0 ? null : "请输入地址信息"
      if (this.receiverErrmsg || this.phoneErrmsg || this.addressErrmsg) return

      if (this.$route.query.editType == "addNewAddr") {
        axios
          .post(
            API_URL + "address",
            {
              receiver: this.receiver,
              phone: this.phone,
              address: this.address
            },
            {
              headers: {
                Authorization: this.$store.state.customer_token
              }
            }
          )
          .then(() => {
            Toast("地址保存成功")
            this.$router.go(-1)
          })
          .catch(err => {
            if (err.response.status == 401) {
              this.$router.push({ name: "login" })
            }
            console.error(err)
          })
      } else if (this.$route.query.editType == "editOldAddr") {
        axios
          .put(
            API_URL + "address",
            {
              receiver: this.receiver,
              phone: this.phone,
              address: this.address,
              address_id: this.$route.query.address_id
            },
            {
              headers: {
                Authorization: this.$store.state.customer_token
              }
            }
          )
          .then(() => {
            Toast("地址保存成功")
            this.$router.go(-1)
          })
          .catch(err => {
            if (err.response.status == 401) {
              this.$router.push({ name: "login" })
            }
            console.error(err)
          })
      }
    }
  },
  mounted: function() {
    this.receiver = this.$route.query.receiver
    this.phone = this.$route.query.phone
    this.address = this.$route.query.address
  }
}
</script>
